{% extends "layout.html" %}
{% set active_page = "settings" %}

{% block head %}
  <script>
    $(document).ready(function() {
      $('[data-toggle=offcanvas]').click(function() {
        $('.row-offcanvas').toggleClass('active');
      });
    });

  {% if not hide_tooltips %}
    $(document).ready(function(){
      $('input[title]').tooltip({placement:'top'});
      $('textarea[title]').tooltip({placement:'top'});
      $('.form-dropdown').dropdown();
      $('.form-dropdown').tooltip();
    });
  {% endif %}
  </script>
{% endblock %} 

{% block body %}

  {% set active_settings = active_settings|default('users') -%}

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper" style="border-right: 1px solid #343434">
      <div class="sidebar-heading">Configuration</div>
      <div class="list-group list-group-flush">
        <a class="list-group-item collapsed{% if active_settings == 'general' %} active{% endif %}" href="{{url_for('routes_settings.settings_general')}}"><i class="fas fa-globe"></i>&nbsp;&nbsp;{{_('General')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'input' %} active{% endif %}" href="{{url_for('routes_settings.settings_input')}}"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;{{_('Custom')}} {{_('Inputs')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'output' %} active{% endif %}" href="{{url_for('routes_settings.settings_output')}}"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;{{_('Custom')}} {{_('Outputs')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'controller' %} active{% endif %}" href="{{url_for('routes_settings.settings_function')}}"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;{{_('Custom')}} {{_('Functions')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'action' %} active{% endif %}" href="{{url_for('routes_settings.settings_action')}}"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;{{_('Custom')}} {{_('Actions')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'widget' %} active{% endif %}" href="{{url_for('routes_settings.settings_widget')}}"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;{{_('Custom')}} {{_('Widgets')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'measurement' %} active{% endif %}" href="{{url_for('routes_settings.settings_measurement')}}"><i class="fas fa-weight"></i>&nbsp;&nbsp;{{_('Measurements')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'users' %} active{% endif %}" href="{{url_for('routes_settings.settings_users')}}"><i class="fas fa-users"></i>&nbsp;&nbsp;{{_('Users')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'pi' %} active{% endif %}" href="{{url_for('routes_settings.settings_pi')}}"><i class="fab fa-linux"></i>&nbsp;&nbsp;{{_('Raspberry Pi')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'alerts' %} active{% endif %}" href="{{url_for('routes_settings.settings_alerts')}}"><i class="fas fa-bell"></i>&nbsp;&nbsp;{{_('Alerts')}}</a>
        <a class="list-group-item collapsed{% if active_settings == 'diagnostic' %} active{% endif %}" href="{{url_for('routes_settings.settings_diagnostic')}}"><i class="fas fa-wrench"></i>&nbsp;&nbsp;{{_('Diagnostics')}}</a>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        {% include 'flash_messages.html' %}
        <button class="btn btn-primary" id="menu-toggle">Settings Menu</button>
        {% block settings %}{% endblock %}
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

{% endblock %}
